<script>

import {getTree} from "@/api/system/config";


export default {

  name: "index",

  data() {

    return {

      totalNum:80,

      flag:true,

      allListNew:[],

      contentTitle:'',

      allList:[],

      contentCon:'',

      dialogVisible:false,

      upDateTime:'',

      ruleForm: {

        name: '',

        region: '',

        title:'',

        code:''

      },

      current:1,

      tableData: [],

      treeQuery:{

        pageSize:10,

        pageNum:1,

        title:'',

        studentName:'',

        className:'',

        stuNum:''

      }

    }



  },

  methods: {

    handleCurrentChange(val){

      this.current=val

      this.treeQuery.pageNum=val

      console.log(val)

      getTree(this.treeQuery).then(res=>{

        console.log(res)

        if (res.code===200) {

          this.tableData=res.rows

        }

      })

    },

    checkOut(item){

      this.dialogVisible=true

      this.upDateTime=item.updateTime

      this.contentTitle=item.title

      this.contentCon=item.content

    },

    resetAll(){

      this.totalNum=80

      this.flag=true

      this.current=1

      this.treeQuery.pageNum=1

      this.ruleForm.title=''

      this.ruleForm.name=''

      this.ruleForm.region=''

      this.ruleForm.code=''

      this.treeQuery.title=''

      this.treeQuery.studentName=''

      this.treeQuery.className=''

      this.treeQuery.stuNum=''

      getTree(this.treeQuery).then(res=>{

        console.log(res)

        if (res.code===200) {

          this.tableData=res.rows

        }

      })

    },

    searchTree(){





      this.treeQuery.studentName=this.ruleForm.name

      this.treeQuery.title = this.ruleForm.title

      this.treeQuery.className=this.ruleForm.region

      this.treeQuery.stuNum=this.ruleForm.code

      getTree(this.treeQuery).then(res=>{

        console.log(res)

        this.totalNum=Number(res.total)

        console.log(this.totalNum)

        if (res.code===200) {

          this.tableData=res.rows

        }

      })

      if (this.totalNum>10){

        this.flag=false

      }else {

        this.flag=true

      }

    },

    getTreeList(){

      getTree(this.treeQuery).then(res=>{

        console.log(res)

        if (res.code===200) {

          this.tableData=res.rows

        }

      })

    }

  },

  created() {

    this.getTreeList()

    getTree({pageSize: 72}).then(res=>{

      console.log(res)

      if (res.code===200) {

        this.allList=res.rows

        this.allList.map(item=>{

          this.allListNew.push(item.className)

        })

        this.allList=[...new Set(this.allListNew)]

      }

    })

  }



}

</script>



<template>

  <div class="tree">

    <div class="treeTitle">

      <el-form label-width="100px" class="demo-ruleForm" :inline="true">

        <el-form-item label="标题信息" >

          <el-input v-model="ruleForm.title" placeholder="请输入标题信息"></el-input>

        </el-form-item>

        <el-form-item label="学生姓名" >

          <el-input v-model="ruleForm.name"  placeholder="请输入学生姓名"></el-input>

        </el-form-item>

        <el-form-item label="班级" >

          <el-select v-model="ruleForm.region" placeholder="请选择班级" >

            <el-option :label="item" :value="item" v-for="item  in allList" ></el-option>

          </el-select>

        </el-form-item>

        <el-form-item label="学号" >

          <el-input v-model="ruleForm.code"   placeholder="请输入学号"></el-input>

        </el-form-item>

        <div class="btn">

          <el-button class="default" @click="resetAll">重置</el-button>

          <el-button type="primary" class="search" @click="searchTree">搜索</el-button>

        </div>

      </el-form>

    </div>

    <div class="treeTable">

      <el-table

        :data="tableData"

        border

        style="width: 100%">

        <el-table-column

          align="center"

          fixed

          type="index"

          label="序号"

          width="80">

        </el-table-column>

        <el-table-column

          align="center"

          prop="title"

          label="标题信息"

          width="600"

          class-name="titleMessage"

        >

        </el-table-column>

        <el-table-column

          prop="studentName"

          label="学生姓名"

          width="80">

        </el-table-column>

        <el-table-column

          align="center"

          prop="className"

          label="班级"

        >

        </el-table-column>

        <el-table-column

          align="center"

          prop="stuNum"

          label="学号"

        >

        </el-table-column>

        <el-table-column

          align="center"

          prop="updateTime"

          label="发布时间"

          width="169">

        </el-table-column>

        <el-table-column

          align="center"

          label="操作"

          width="200">

          <template slot-scope="scope">

            <el-button  type="text" size="small" @click="checkOut(scope.row)">查看</el-button>

          </template>

        </el-table-column>

      </el-table>

      <!--    查看弹出框-->

      <el-dialog

        title="提示"

        :visible.sync="dialogVisible"

        width="60%"

      >

        <div class="upTime">

          <div></div>

          <div>{{upDateTime}}</div>

        </div>

        <div class="content">

          <div class="contentMiddle">

            <div class="contentTitle">{{contentTitle}}</div>

            <div class="contentCon">{{contentCon}}</div>

          </div>

        </div>

      </el-dialog>

    </div>

    <div class="treePage">

      <el-pagination

        v-if="flag"

        @current-change="handleCurrentChange"

        background

        :current-page="current"

        layout="prev, pager, next"

        :total="totalNum">

      </el-pagination>

    </div>

  </div>

</template>



<style scoped lang="scss">

.tree {

  padding-left: 20px;

  padding-right: 20px;

}

::v-deep {

  .treeTitle {

    margin: 20px;

  }

  .el-input--medium .el-input__inner {

    width: 157px;

  }

  .btn {

    float: right;

    margin-right: 10px;

  }

  .treePage {

    float: right;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .cell{
    white-space: nowrap;
    overflow: hidden;
  }

  .el-dialog__header {
    text-align: left;
    background-color: #1892ff;

  }

  .el-dialog__title {

    color: #Fff;

  }

  .el-dialog__headerbtn .el-dialog__close {

    color: #fff;

  }

  .upTime {

    display: flex;

    justify-content: space-between;

    align-items: center;

  }

  .content {

    padding: 20px;

    border-radius: 10px;

  }

  .contentMiddle {

    background-color: #f2f3f4;

    padding: 20px;

  }

  .contentTitle {

    margin-bottom: 20px;

    font-weight: 600;

    font-size: 16px;

  }

  .contentCon {

    font-size: 14px;

  }

}



</style>

